<html xml:lang="en" lang="en">
<head>
<title>Table Reordering Using Scriptaculous | bottledcity.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />


    <script language="JavaScript" src="prototype.js"></script>
	<script language="JavaScript" src="scriptaculous.js"></script>

<style>
div.dropmarker {
      height:6px;
      width:100px;
      border-top:3px solid #000;
      color: #fff;
     
      z-index:1000;
      margin : 0 0 30px 20px;
      
   }
   
   #item_list tr {
     cursor:move;
   }

table { width : 100px; margin : 0 0 30px 20px; border-collapse : collapse; font : 100% Trebuchet, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
/* =tr */
tbody tr:hover { background-color : #edf6dd; }

/* =th */
th { padding : .5em; text-align : left; color : #000; border-right : 1px solid #fff; }

/* =td*/
td { padding : .35em;  border-bottom : 1px dotted #c8c8c8;  vertical-align : top; }
   </style>
</head>

<body>
<div id="container">
<table style="position: relative;"> 
<thead>
    <tr><th>Name</th></tr>
</thead>
<tbody id="item_list">
    <tr id="item_1"><td>Item One</td></tr>
    <tr id="item_2"><td>Item Two</td></tr>
    <tr id="item_3"><td>Item Three</td></tr>
    <tr id="item_4"><td>Item Four</td></tr>
</tbody>
</table>
 

<script type="text/javascript" language="javascript">   
   
   function updateOrder(){
        var ampcharcode= '%26';
        var serializeOpts = Sortable.serialize('item_list')+ unescape(ampcharcode)+"key=item_list"+unescape(ampcharcode)+"update=products";
        var options = {
            method : 'post',
            parameters : serializeOpts 
            };
            
          // alert(options.parameters);
           new Ajax.Request('Reorder.aspx',options);
   }

  Sortable.create('item_list',{tag:'tr', ghosting:true,constraint:'vertical', onUpdate : updateOrder,tree:true})

</script>

</div>
</body>
</html>
